<template>
    <div id="app">
        <div class="box">
            <div class="bot">
                <div class="botLis" @click="goExplore">
                    <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/image/20240218/20240218153042076377.png"
                        alt="" />
                    <div>探索</div>
                </div>
                <div class="botLis" @click="goSort">
                    <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/image/20240218/20240218153041713050.png"
                        alt="" />
                    <div>分类</div>
                </div>
                <div class="botLis" @click="goHome">
                    <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/image/20240218/20240218153041607677.png"
                        alt="" />
                    <div>造</div>
                </div>
                <div class="botLis" @click="goShopcart">
                    <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/image/20240218/20240218153042268625.png"
                        alt="" />
                    <div>购物车</div>
                </div>
                <div class="botLis" @click="goLogin">
                    <img src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/image/20240218/20240218153041245752.png"
                        alt="" />
                    <div>我</div>
                </div>
                <!-- a -->
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {};
    },
    methods: {
        goLogin() {
            this.$router.push("/login").catch((err) => err);
        },
        goShopcart() {
            this.$router.push("/shopcart").catch((err) => err);
        },
        goSort() {
            this.$router.push("/detail").catch((err) => err);
        },
        goHome() {
            this.$router.push("/home").catch((err) => err);
        },
        goExplore() {
            this.$router.push("/explore").catch((err) => err);
        },
    },
};
</script>

<style lang="scss" scoped>
.box {
    width: 100%;

    .bot {
        width: 100%;
        height: 1rem;
        // background: red;
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
        // justify-content: space-between;
        background-color: #fff;

        .botLis {
            width: 1.5rem;
            text-align: center;
            // line-height: 1rem;
            font-size: 0.24rem;
            // display: flex;

            img {
                width: 0.5rem;
                height: 0.5rem;
                margin-top: 0.1rem;
            }
        }
    }
}
</style>